<!DOCTYPE html>
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<head>
<meta charset="utf-8">
<title>Shifter - Responsive HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="images/favicon.gif"/>
<link rel="stylesheet" href="css/style.css" media="screen"/><!-- MAIN STYLE CSS FILE -->
<link rel="stylesheet" href="css/responsive.css" media="screen"/><!-- RESPONSIVE CSS FILE -->
<link rel="stylesheet" id="style-color" href="css/colors/blue-color.css" media="screen"/><!-- DEFAULT BLUE COLOR CSS FILE -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,500' rel='stylesheet' type='text/css'><!-- ROBOTO FONT FROM GOOGLE CSS FILE -->
<link rel="stylesheet" href="css/prettyPhoto.css" media="screen"/><!--PRETTYPHOTO CSS FILE -->
<link rel="stylesheet" href="css/font-awesome/font-awesome.min.css" media="screen"/><!-- FONT AWESOME ICONS CSS FILE -->
<link rel="stylesheet" href="css/layer-slider.css" media="screen"/><!-- LAYER SLIDER CSS FILE -->
<link rel="stylesheet" href="css/flexslider.css" media="screen"/><!-- FLEX SLIDER CSS FILE -->
<link rel="stylesheet" href="css/revolution-slider.css" media="screen"/><!-- REVOLUTION SLIDER CSS FILE -->
<!-- All JavaScript Files (FOR FASTER LOADING OF YOUR SITE, REMOVE ALL JS PLUGINS YOU WILL NOT USE)-->
<script type="text/javascript" src="js/jquery.min.js"></script><!-- JQUERY JS FILE -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><!-- JQUERY UI JS FILE -->
<script type="text/javascript" src="js/flex-slider.min.js"></script><!-- FLEX SLIDER JS FILE -->
<script type="text/javascript" src="js/navigation.min.js"></script><!-- MAIN NAVIGATION JS FILE -->
<script type="text/javascript" src="js/jquery.layerslider.js"></script><!-- LAYER SLIDER JS FILE -->
<script type="text/javascript" src="js/layerslider.transitions.js"></script><!-- LAYER SLIDER TRANSITIONS JS FILE -->
<script type="text/javascript" src="js/map.min.js"></script><!-- GOOGLE MAP JS FILE -->
<script type="text/javascript" src="js/carousel.js"></script><!-- CAROUSEL SLIDER JS -->
<script type="text/javascript" src="js/jquery.theme.plugins.min.js"></script><!-- REVOLUTION SLIDER PLUGINS JS FILE -->
<script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script><!-- REVOLUTION SLIDER JS FILE -->
<script type="text/javascript" src="js/flickr.js"></script><!-- FLICKR WIDGET JS FILE -->
<script type="text/javascript" src="js/instagram.js"></script><!-- INSTAGRAM WIDGET JS FILE -->
<script type="text/javascript" src="js/jquery.twitter.js"></script><!--TWITTER WIDGET JS FILE -->
<script type="text/javascript" src="js/prettyPhoto.min.js"></script><!-- PRETTYPHOTO JS FILE -->
<script type="text/javascript" src="js/jquery.tooltips.min.js"></script><!-- TOOLTIPS JS FILE -->
<script type="text/javascript" src="js/isotope.min.js"></script><!--ISOTOPE JS FILE -->
<script type="text/javascript" src="js/scrolltopcontrol.js"></script><!-- SCROLL TO TOP JS PLUGIN -->
<script type="text/javascript" src="js/jquery.easy-pie-chart.js"></script><!-- EASY PIE JS FILE -->
<script type="text/javascript" src="js/jquery.transit.min.js"></script><!-- TRANSITION JS FILE -->
<script type="text/javascript" src="js/custom.js"></script><!-- CUSTOM JAVASCRIPT JS FILE -->
</head>
<body>
<div id="container">
	<!-- main container starts-->
	<div id="wrapp">
		<!-- main wrapp starts-->
		<header id="header">
		<!--header starts -->
		<div id="header-links">
			<div class="container">
				<div class="one-half">
					<ul class="contact-links">
						<!-- header social links starts-->
						<li><a href="#"><i class="icon-home"></i>5 Avenue, Some City </a></li>
						<li><a href="#"><i class="icon-phone"></i>+987 654 321 </a></li>
						<li><a href="#"><i class="icon-map-marker"></i>mail@yoursite.com</a></li>
					</ul>
				</div>
				<div class="one-half">
					<ul class="social-links">
						<!-- header social links starts-->
						<li><a href="#" class="tooltip" title="Some Title"><i class="icon-twitter"></i></a></li>
						<li><a href="#" class="tooltip" title="Some Title"><i class="icon-facebook"></i></a></li>
						<li><a href="#" class="tooltip" title="Some Title"><i class="icon-linkedin"></i></a></li>
						<li><a href="#" class="tooltip" title="Some Title"><i class="icon-google-plus"></i></a></li>
						<li><a href="#" class="tooltip" title="Some Title"><i class="icon-skype"></i></a></li>
						<li><a href="#" class="tooltip" title="Some Title"><i class="icon-dribbble"></i></a></li>
						<li><a href="#" class="tooltip" title="Some Title"><i class="icon-pinterest"></i></a></li>
						<li><a href="#" class="tooltip" title="Some Title"><i class="icon-tumblr"></i></a></li>
					</ul>
					<!--header social links ends -->
				</div>
			</div>
		</div>
		<div class="container">
			<div class="head-wrapp">
				<a href="index.html" id="logo"><img src="images/logo.png" alt=""/><span>Responsive Business Template</span></a>
				<!--your logo-->
				<nav class="top-search">
				<!-- search starts-->
				<form action="404-error.html" method="get">
					<button class="search-btn"></button>
					<input class="search-field" type="text" onblur="if(this.value=='')this.value='Search';" onfocus="if(this.value=='Search')this.value='';" value="Search"/>
				</form>
				</nav>
				<!--search ends -->
			</div>
		</div>
		<div id="main-navigation">
			<!--main navigation wrapper starts -->
			<div class="container">
				<ul class="main-menu">
					<li><a href="index.html">Home</a>
					<!-- Second Level / Start -->
					<ul>
						<li><a href="index.html">Layer Slider (Default)</a></li>
						<li><a href="home-revolution-slider.html">Revolution Slider</a></li>
						<li><a href="home-flex-slider.html">Flex Slider</a></li>
						<li><a href="home-alternative-header-1.html">Header Style 1</a></li>
						<li><a href="home-alternative-header-2.html">Header Style 2</a></li>
						<li><a href="home-alternative-header-3.html">Header Style 3</a></li>
						<li><a href="#">Menu Second Level</a>
						<ul>
							<li><a href="#">Dummy Item</a></li>
							<li><a href="#">Dummy Item</a></li>
						</ul>
						</li>
					</ul>
					<!-- Second Level / End -->
					</li>
					<li><a href="#">Mega Menu</a>
					<!-- Mega Menu / Start -->
					<ul class="four-columns">
						<li class="one">
						<h5>Some Pages</h5>
						<ol>
							<li><a href="about-us.html"><i class="icon-group"></i>About Us</a></li>
							<li><a href="services.html"><i class="icon-cog"></i>Services</a></li>
							<li><a href="faq.html"><i class="icon-question-sign"></i>F.A.Q</a></li>
							<li><a href="team-member.html"><i class="icon-user"></i>Team Member</a></li>
						</ol>
						</li>
						<li class="one">
						<h5>Feature Pages</h5>
						<ol>
							<li><a href="left-sidebar.html"><i class="icon-circle-arrow-left"></i>Left Sidebar</a></li>
							<li><a href="right-sidebar.html"><i class="icon-circle-arrow-right"></i>Right Sidebar</a></li>
							<li><a href="404-error.html"><i class="icon-warning-sign"></i>404 Page</a></li>
							<li><a href="clients.html"><i class="icon-quote-left"></i>Clients</a></li>
						</ol>
						</li>
						<li class="one">
						<h5>Elements Pages</h5>
						<ol>
							<li><a href="elements.html"><i class=" icon-cogs"></i>Elements</a></li>
							<li><a href="icons.html"><i class="icon-th-large"></i>Icons</a></li>
							<li><a href="pricing-tables.html"><i class=" icon-table"></i>Pricing Tables</a></li>
							<li><a href="typography.html"><i class="icon-text-height"></i>Typography</a></li>
						</ol>
						</li>
						<li class="one">
						<h5>Portfolio Pages</h5>
						<ol>
							<li><a href="portfolio-2.html"><i class=" icon-lightbulb"></i>2 Columns Portfolio</a></li>
							<li><a href="portfolio-3.html"><i class=" icon-suitcase"></i>3 Columns Portfolio</a></li>
							<li><a href="portfolio-4.html"><i class="icon-heart"></i>4 Columns Portfolio</a></li>
							<li><a href="single-project-small.html"><i class="icon-zoom-in"></i>Single Project</a></li>
						</ol>
						</li>
					</ul>
					<!-- Mega Menu / End -->
					</li>
					<li><a href="#"> Portfolio</a>
					<!-- Second Level / Start -->
					<ul>
						<li><a href="portfolio-2.html">2 Columns Portfolio</a></li>
						<li><a href="portfolio-3.html">3 Columns Portfolio</a></li>
						<li><a href="portfolio-4.html">4 Columns Portfolio</a></li>
						<li><a href="single-project-small.html">Single Project Small</a></li>
						<li><a href="single-project-large.html">Single Project Large</a></li>
					</ul>
					<!-- Second Level / End -->
					</li>
					<li><a href="#" id="current">Shortcodes</a>
					<!-- Second Level / Start -->
					<ul>
						<li><a href="columns.html">Columns</a></li>
						<li><a href="typography.html">Typography</a></li>
						<li><a href="elements.html">Elements</a></li>
						<li><a href="icons.html">Icons</a></li>
						<li><a href="pricing-tables.html">Pricing Tables</a></li>
					</ul>
					<!-- Second Level / End -->
					<li><a href="#">Shop</a>
					<!-- Second Level / Start -->
					<ul>
						<li><a href="shop-layout.html">Shop</a></li>
						
					</ul>
					<!-- Second Level / End -->
					</li>
					<li><a href="#"> Blog</a>
					<!-- Second Level / Start -->
					<ul>
						<li><a href="blog-small.html">Small Layout</a></li>
						<li><a href="blog-medium.html">Medium Layout</a></li>
						<li><a href="blog-large.html">Large Layout</a></li>
						<li><a href="blog-post.html">Single Post</a></li>
					</ul>
					<!-- Second Level / End -->
					</li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
				<!-- main navigation ends-->
				<div class="after-nav-info">
					<h4>contact phone: +987 654 321 000</h4>
				</div>
			</div>
		</div>
		<!--main navigation wrapper ends -->
		</header>
		<div id="content">
			<div id="breadcrumb">
				<!-- breadcrumb starts-->
				<div class="container">
					<div class="one-half">
						<h4>Elements &amp; Shortcodes</h4>
					</div>
					<div class="one-half">
						<nav id="breadcrumbs">
						<!--breadcrumb nav starts-->
						<ul>
							<li>You are here:</li>
							<li><a href="index.html">Home</a></li>
							<li>Elements &amp; Shortcodes</li>
						</ul>
						</nav>
						<!--breadcrumb nav ends -->
					</div>
				</div>
			</div>
			<!--breadcrumbs ends -->
			<div class="container">
				
					<div class="one-half">
						<h4>Default Color Buttons</h4>
						<a href="#" class="button color small round">Button</a> &nbsp; <a href="#" class="button color small">Button</a> &nbsp; <a href="#" class="button color small circle">Button</a>
						<a href="#" class="button color big round">Button</a> &nbsp; <a href="#" class="button color big">Button</a> &nbsp; <a href="#" class="button color big circle">Button</a><br/><br/><br/>
						<a href="#" class="button color huge round">Button</a> &nbsp; <a href="#" class="button color huge">Button</a> &nbsp; <a href="#" class="button color huge circle">Button</a>
					</div>
					<div class="one-half">
						<h4>Default Grey Buttons</h4>
						<a href="#" class="button grey small round">Button</a> &nbsp; <a href="#" class="button grey small">Button</a> &nbsp; <a href="#" class="button grey small circle">Button</a>
						<a href="#" class="button grey big round">Button</a> &nbsp; <a href="#" class="button grey big">Button</a> &nbsp; <a href="#" class="button grey big circle">Button</a><br/><br/><br/>
						<a href="#" class="button grey huge round">Button</a> &nbsp; <a href="#" class="button grey huge">Button</a> &nbsp; <a href="#" class="button grey huge circle">Button</a>
					</div>
					<div class="horizontal-line">
					</div>
					<div class="one-half">
						<h4>Alternative Color Buttons</h4>
						<a href="#" class="button color-alt small round">Button</a> &nbsp; <a href="#" class="button color-alt small">Button</a> &nbsp; <a href="#" class="button color-alt small circle">Button</a>
						<a href="#" class="button color-alt big round">Button</a> &nbsp; <a href="#" class="button color-alt big">Button</a> &nbsp; <a href="#" class="button color-alt big circle">Button</a><br/><br/><br/>
						<a href="#" class="button color-alt huge round">Button</a> &nbsp; <a href="#" class="button color-alt huge">Button</a> &nbsp; <a href="#" class="button color-alt huge circle">Button</a>
					</div>
					<div class="one-half">
						<h4>Alternative Grey Buttons</h4>
						<a href="#" class="button simple-grey small round">Button</a> &nbsp; <a href="#" class="button simple-grey small">Button</a> &nbsp; <a href="#" class="button simple-grey small circle">Button</a>
						<a href="#" class="button simple-grey big round">Button</a> &nbsp; <a href="#" class="button simple-grey big">Button</a> &nbsp; <a href="#" class="button simple-grey big circle">Button</a><br/><br/><br/>
						<a href="#" class="button simple-grey huge round">Button</a> &nbsp; <a href="#" class="button simple-grey huge">Button</a> &nbsp; <a href="#" class="button simple-grey huge circle">Button</a>
					</div>
					<div class="horizontal-line">
					</div>
					<div class="one-half">
						<h4>Jquery Accordion</h4>
						<ul class="accordion">
							<li class="accordion-item">
							<div class="accordion-switch">
								<span class="togglegfx"></span>Do I need to install this?
							</div>
							<div class="accordion-content">
								<p>
									 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
								</p>
							</div>
							</li>
							<li class="accordion-item">
							<div class="accordion-switch">
								<span class="togglegfx"></span>How To change color version?
							</div>
							<div class="accordion-content">
								<p>
									 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
								</p>
							</div>
							</li>
							<li class="accordion-item">
							<div class="accordion-switch">
								<span class="togglegfx"></span>Where can i get help with this?
							</div>
							<div class="accordion-content">
								<p>
									 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
								</p>
							</div>
							</li>
							<li class="accordion-item">
							<div class="accordion-switch">
								<span class="togglegfx"></span>How do i change the contact form?
							</div>
							<div class="accordion-content">
								<p>
									 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
								</p>
							</div>
							</li>
							<li class="accordion-item">
							<div class="accordion-switch">
								<span class="togglegfx"></span>Do I need to know php?
							</div>
							<div class="accordion-content">
								<p>
									 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
								</p>
							</div>
							</li>
						</ul>
					</div>
					<div class="one-half">
						<h4>Jquery Tabs</h4>
						<ul class="tabs-nav">
							<li class="active">
							<a href="#tab1"><i class="icon-cog"></i>First</a>
							</li>
							<li>
							<a href="#tab2"><i class="icon-user"></i>Second</a>
							</li>
							<li>
							<a href="#tab3"><i class="icon-desktop"></i>Third</a>
							</li>
							<li>
							<a href="#tab4"><i class="icon-info"></i>Fourth</a>
							</li>
						</ul>
						<!-- end .tabs-nav -->
						<div class="tabs-container">
							<div class="tab-content" id="tab1">
								<p>
									 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
								</p>
								<p>
									 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
								</p>
							</div>
							<!-- end #tab1 -->
							<div class="tab-content" id="tab2">
								<p>
									 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
								</p>
								<p>
									 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
								</p>
							</div>
							<!-- end #tab2 -->
							<div class="tab-content" id="tab3">
								<p>
									 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
								</p>
								<p>
									 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
								</p>
							</div>
							<!-- end #tab3 -->
							<div class="tab-content" id="tab4">
								<p>
									 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
								</p>
								<p>
									 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
								</p>
							</div>
							<!-- end #tab3 -->
						</div>
						<!-- end .tabs-container -->
					</div>
					<div class="horizontal-line">
					</div>
					<div class="container">
					<div class="one-half">
						<h4>Skills Graph</h4>
						<ul class="bar_graph">
							<!-- skill graph starts -->
							<li>
							<p>
								<i class="icon-html5"></i>HTML/CSS 70%
							</p>
							<div class="bar-wrap">
								<span data-width="70"></span>
							</div>
							</li>
							<li>
							<p>
								<i class="icon-pencil"></i>Logo Design 80%
							</p>
							<div class="bar-wrap">
								<span data-width="80"></span>
							</div>
							</li>
							<li>
							<p>
								<i class="icon-cog"></i>WordPress 100%
							</p>
							<div class="bar-wrap">
								<span data-width="100"></span>
							</div>
							</li>
							<li>
							<p>
								<i class="icon-magic"></i>Photoshop 90%
							</p>
							<div class="bar-wrap">
								<span data-width="90"></span>
							</div>
							</li>
							<li>
							<p>
								<i class="icon-user"></i>Illustrator 75%
							</p>
							<div class="bar-wrap">
								<span data-width="75"></span>
							</div>
							</li>
						</ul>
						<!--skill graph ends -->
					</div>
					<div class="one-fourth">
						<h4>Modern Notice</h4>
						<div class="modern-notice dark">
							<h3>Web Designer Postion Open</h3>
							<div class="avatar">
								<img src="images/happy-clients-02.jpg" alt=""/>
							</div>
							<p>
								 Aliquam interdum vehicula nulla et aliquam. Integer ornare euismod .
							</p>
							<br/>
							<p>
								<a href="#" class="button small color-alt round">Apply Now</a>
							</p>
						</div>
					</div>
					 	<div class="one-fourth">
						<h4>Modern Notice</h4>
						<div class="modern-notice light">
							<h3>Web Designer Postion Open</h3>
							<div class="avatar">
								<img src="images/happy-clients-02.jpg" alt=""/>
							</div>
							<p>
								 Aliquam interdum vehicula nulla et aliquam. Integer ornare euismod .
							</p>
							<br/>
							<p>
								<a href="#" class="button small color-alt round">Apply Now</a>
							</p>
						</div>
					</div>
					</div>
					<div class="horizontal-line">
					</div>
					<div class="one">
						<ul class="feature-block-list">
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-lightbulb"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-cogs"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-desktop"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-user"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-envelope"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-tablet"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-check-sign"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-info"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-pencil"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-lightbulb"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-home"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-heart"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-shopping-cart"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-map-marker"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-remove-sign"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-coffee"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon">
										<i class="icon-globe"></i><span></span>
									</div>
								</div>
							</div>
							</li>
						</ul>
						<div class="horizontal-line">
						</div>
						<ul class="feature-block-list">
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-lightbulb"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-cogs"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-desktop"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-user"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-envelope"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-tablet"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-check-sign"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-info"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-pencil"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-lightbulb"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-home"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-heart"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-shopping-cart"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-map-marker"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-remove-sign"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-coffee"></i><span></span>
									</div>
								</div>
							</div>
							</li>
							<li>
							<div class="feature-block">
								<div class="feature-block-title">
									<div class="feature-block-icon round">
										<i class="icon-globe"></i><span></span>
									</div>
								</div>
							</div>
							</li>
						</ul>
					</div>
					<div class="horizontal-line">
					</div>
					<div class="one">
						<h4>Colored Icons</h4>
						<div class="one-sixth">
							<div class="feature-block">
								<h4 class="img-holder-alt">
								<i class="icon-cog"></i>
								</h4>
							</div>
						</div>
						<div class="one-sixth">
							<div class="feature-block">
								<h4 class="img-holder-alt">
								<i class="icon-envelope-alt"></i>
								</h4>
							</div>
						</div>
						<div class="one-sixth">
							<div class="feature-block">
								<h4 class="img-holder-alt">
								<i class="icon-heart"></i>
								</h4>
							</div>
						</div>
						<div class="one-sixth">
							<div class="feature-block">
								<h4 class="img-holder-alt">
								<i class="icon-home"></i>
								</h4>
							</div>
						</div>
						<div class="one-sixth">
							<div class="feature-block">
								<h4 class="img-holder-alt">
								<i class="icon-plus-sign"></i>
								</h4>
							</div>
						</div>
						<div class="one-sixth">
							<div class="feature-block">
								<h4 class="img-holder-alt">
								<i class="icon-warning-sign"></i>
								</h4>
							</div>
						</div>
					</div>
					<div class="one">
					<div class="horizontal-line">
					</div>
					<div class="one-fourth">
						<h4>Flickr Photos</h4>
						<div class="flickr-widget">
						</div>
					</div>
					<div class="one-fourth">
						<h4>Instagram Photos</h4>
						<div class="instagram-widget">
						</div>
					</div>
					<div class="one-half">
						<h4>Simple Notifications</h4>
						<div class="notification error">
							<span class="close-notification"><i class="icon-remove-sign"></i></span>
							<p>
								<i class="icon-warning-sign"></i>This is an Error notification.
							</p>
						</div>
						<div class="notification success">
							<span class="close-notification"><i class="icon-remove-sign"></i></span>
							<p>
								<i class="icon-check-sign"></i>This is an Success notification.
							</p>
						</div>
						<div class="notification warning">
							<span class="close-notification"><i class="icon-remove-sign"></i></span>
							<p>
								<i class="icon-exclamation-sign"></i>This is an Warning notification.
							</p>
						</div>
						<div class="notification notice">
							<span class="close-notification"><i class="icon-remove-sign"></i></span>
							<p>
								<i class="icon-info-sign"></i>This is an Notice notification.
							</p>
						</div>
					</div>
					</div>
					<div class="horizontal-line">
					</div>
					<div class="one">
						<h4>Simple Table</h4>
						<table class="simple-table">
						<tr>
							<th>
								 Table Title 1
							</th>
							<th>
								 Table Title 2
							</th>
							<th>
								 Table Title 3
							</th>
							<th>
								 Table Title 4
							</th>
						</tr>
						<tr>
							<td>
								 Package 1
							</td>
							<td>
								 Description 1
							</td>
							<td>
								 Some Info
							</td>
							<td>
								 Some Info
							</td>
						</tr>
						<tr>
							<td>
								 Package 2
							</td>
							<td>
								 Description 2
							</td>
							<td>
								 Some Info
							</td>
							<td>
								 Some Info
							</td>
						</tr>
						<tr>
							<td>
								 Package 3
							</td>
							<td>
								 Description 3
							</td>
							<td>
								 Some Info
							</td>
							<td>
								 Some Info
							</td>
						</tr>
						<tr>
							<td>
								 Package 4
							</td>
							<td>
								 Description 4
							</td>
							<td>
								 Some Info
							</td>
							<td>
								 Some Info
							</td>
						</tr>
						<tr>
							<td>
								 Package 4
							</td>
							<td>
								 Description 5
							</td>
							<td>
								 Some Info
							</td>
							<td>
								 Some Info
							</td>
						</tr>
						</table>
					</div>
				 
			</div>
			<div class="intro-features"><!-- intro features panel starts -->
				<div class="container">
					<h4>Our Latest Projects</h4>
					<div class="slidewrap">
						<!--project carousel starts-->
						<ul class="slider" id="sliderName">
							<li class="slide"><!-- carousel item starts -->
							<div class="one-fourth">
							<div class="item-wrapp">
								<div class="portfolio-item">
									<a href="single-project-small.html" class="item-permalink"><i class="icon-link"></i></a>
									<a href="images/portfolio/portfolio-item-1.jpg" data-rel="prettyPhoto" class="item-preview"><i class="icon-zoom-in"></i></a>
									<img src="images/portfolio/portfolio-item-1.jpg" alt=""/>
								</div>
								<div class="portfolio-item-title">
									<a href="single-project-small.html">Custom WordPress Theme</a>
									<p>
										 Design / Development
									</p>
								</div>
							</div>
							</div>

							<div class="one-fourth">
							<div class="item-wrapp">
								<div class="portfolio-item">
									<a href="single-project-small.html" class="item-permalink"><i class="icon-link"></i></a>
									<a href="images/portfolio/portfolio-item-1.jpg" data-rel="prettyPhoto" class="item-preview"><i class="icon-zoom-in"></i></a>
									<img src="images/portfolio/portfolio-item-1.jpg" alt=""/>
								</div>
								<div class="portfolio-item-title">
									<a href="single-project-small.html">Custom WordPress Theme</a>
									<p>
										 Design / Development
									</p>
								</div>
							</div>
							</div>

							<div class="one-fourth">
							<div class="item-wrapp">
								<div class="flexslider portfolio-items-slider fade">
									<ul class="slides">
										<li><img src="images/portfolio/portfolio-item-2.jpg" alt=""/></li>
										<li><img src="images/portfolio/portfolio-item-3.jpg" alt=""/></li>
										<li><img src="images/portfolio/portfolio-item-4.jpg" alt=""/></li>
									</ul>
								</div>
								<div class="portfolio-item-title">
									<a href="single-project-small.html">Custom WordPress Theme</a>
									<p>
										 Design / Development
									</p>
								</div>
							</div>
							</div>

							<div class="one-fourth">
							<div class="item-wrapp">
								<div class="portfolio-item">
									<a href="single-project-small.html" class="item-permalink"><i class="icon-link"></i></a>
									<a href="images/portfolio/portfolio-item-1.jpg" data-rel="prettyPhoto" class="item-preview"><i class="icon-zoom-in"></i></a>
									<img src="images/portfolio/portfolio-item-1.jpg" alt=""/>
								</div>
								<div class="portfolio-item-title">
									<a href="single-project-small.html">Custom WordPress Theme</a>
									<p>
										 Design / Development
									</p>
								</div>
							</div>
							</div>
							</li>
							<li class="slide"><!-- carousel item starts -->
							<div class="one-fourth">
							<div class="item-wrapp">
								<div class="portfolio-item">
									<a href="single-project-small.html" class="item-permalink"><i class="icon-link"></i></a>
									<a href="images/portfolio/portfolio-item-1.jpg" data-rel="prettyPhoto" class="item-preview"><i class="icon-zoom-in"></i></a>
									<img src="images/portfolio/portfolio-item-1.jpg" alt=""/>
								</div>
								<div class="portfolio-item-title">
									<a href="single-project-small.html">Custom WordPress Theme</a>
									<p>
										 Design / Development
									</p>
								</div>
							</div>
							</div>

							<div class="one-fourth">
							<div class="item-wrapp">
								<div class="portfolio-item">
									<a href="single-project-small.html" class="item-permalink"><i class="icon-link"></i></a>
									<a href="images/portfolio/portfolio-item-1.jpg" data-rel="prettyPhoto" class="item-preview"><i class="icon-zoom-in"></i></a>
									<img src="images/portfolio/portfolio-item-1.jpg" alt=""/>
								</div>
								<div class="portfolio-item-title">
									<a href="single-project-small.html">Custom WordPress Theme</a>
									<p>
										 Design / Development
									</p>
								</div>
							</div>
							</div>

							<div class="one-fourth">
							<div class="item-wrapp">
								<div class="portfolio-item">
									<a href="single-project-small.html" class="item-permalink"><i class="icon-link"></i></a>
									<a href="images/portfolio/portfolio-item-1.jpg" data-rel="prettyPhoto" class="item-preview"><i class="icon-zoom-in"></i></a>
									<img src="images/portfolio/portfolio-item-1.jpg" alt=""/>
								</div>
								<div class="portfolio-item-title">
									<a href="single-project-small.html">Custom WordPress Theme</a>
									<p>
										 Design / Development
									</p>
								</div>
							</div>
							</div>

							<div class="one-fourth">
							<div class="item-wrapp">
								<div class="portfolio-item">
									<a href="single-project-small.html" class="item-permalink"><i class="icon-link"></i></a>
									<a href="images/portfolio/portfolio-item-1.jpg" data-rel="prettyPhoto" class="item-preview"><i class="icon-zoom-in"></i></a>
									<img src="images/portfolio/portfolio-item-1.jpg" alt=""/>
								</div>
								<div class="portfolio-item-title">
									<a href="single-project-small.html">Custom WordPress Theme</a>
									<p>
										 Design / Development
									</p>
								</div>
							</div>
							</div>
							</li>
						</ul><!-- carousel items UL ends -->
						<ul class="slidecontrols">
							<li><a href="#sliderName" class="prev">Prev</a></li>
							<li><a href="#sliderName" class="next">Next</a></li>
							
						</ul>
					</div>
				</div>
			</div><!-- intro features panel ends -->
		</div>
		<section class="footer-call-to-action">
		<section class="container">
		<div class="three-fourth">
			<h4>If you you’re interested in working with Us, feel free to contact Us via contact form.</h4>
		</div>
		<div class="one-fourth">
			<a href="#" class="button grey huge round">Purchase Now</a>
		</div>
		</section>
		</section>
		<footer id="footer">
		<section class="container">
		<section class="one-third">
		<h4>Twitter Feeds</h4>
		<ul class="twitter-feeds">
			<!-- twitter widget starts-->
		</ul>
		<!-- twitter widget ends-->
		<p>
			<a href="#">Follow Me on Twitter</a>
		</p>
		</section>
		<section class="one-third">
		<h4>Latest Posts</h4>
		<ul>
			<!-- latest posts widget starts-->
			<li><a href="blog-post.html">Free Responsive HTML5 Template.</a></li>
			<li><a href="blog-post.html">PSD Widget UI Free Download</a></li>
			<li><a href="blog-post.html">Free Business Bootsrap Template</a></li>
			<li><a href="blog-post.html">Custom WordPress Themes</a></li>
		</ul>
		<!-- lastest posts widget ends-->
		</section>
		<section class="one-third">
		<h4>Flickr Photos</h4>
		<div class="flickr-widget">
			<!-- flickr widget starts-->
		</div>
		</section>
		</section>
		</footer>
		<section id="copyrights">
		<section class="container">
		<div class="one-half">
			<p>
				 Copyright &copy; 2014.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
			</p>
		</div>
		<div class="one-half">
			<ul class="copyright_links">
				<li><a href="#" title="Home">Home</a></li>
				<li><a href="#" title="About">About us</a></li>
				<li><a href="#" title="Blog">Blog</a></li>
				<li><a href="#" title="Contact">Contact</a></li>
			</ul>
		</div>
		</section>
		</section>
	</div>
	<!-- main wrapp starts-->
</div>
<!-- main container ends-->

</body>
</html>